<template>
  <vxe-modal
    title="查看物资详情"
    v-model="dialogVisible"
    v-if="dialogVisible"
    :loading="loading"
    width="60%" showFooter esc-closable show-zoom resize>

    <div style="height: 55vh; overflow-y: auto;">
      <el-card class="box-card" shadow="never" :body-style="{ padding: '10px',backgroundColor: '#bfcdda' }">
        <!-- 物资基本信息 -->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span style="font-size: 16px; color: #1890ff;">物资基本信息</span>
          </div>
          <el-descriptions class="margin-top" :column="2" size="medium" border
                           :contentStyle="content_style" :labelStyle="label_style">
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  物资名称：
                </div>
              </template>
              {{ wzData.wzName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  物资单位：
                </div>
              </template>
              {{ wzData.wzDw }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  所属仓库：
                </div>
              </template>
              {{ wzData.ckName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  所属货架：
                </div>
              </template>
              {{ wzData.hjName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  所属分层：
                </div>
              </template>
              {{ wzData.fcName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  物资分类：
                </div>
              </template>
              {{ wzData.wzFl }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  安全库存：
                </div>
              </template>
              {{ wzData.aqKc }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  物资规格：
                </div>
              </template>
              {{ wzData.wzGg }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  物资专业：
                </div>
              </template>
              {{ wzData.wzZy }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  单价：
                </div>
              </template>
              {{ wzData.dj }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  物资备注：
                </div>
              </template>
              {{ wzData.wzBz }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <div class="right-align-label">
                  <i class="el-icon-user"></i>
                  库存：
                </div>
              </template>
              {{ wzData.kc }} {{'(' + wzData.wzDw + ')'}}
            </el-descriptions-item>

          </el-descriptions>
        </el-card>

      </el-card>
    </div>
    <div slot="footer" class="dialog-footer dialog-footer-center">
      <el-button @click="dialogVisible=false">关闭</el-button>
    </div>
  </vxe-modal>
</template>
<script>


import {getSbxxgl} from "@/api/sbgl/sbxxgl";
import {getWzxx} from "@/api/wzgl/wzxx";

export default {
  name: "WzXq", //物资详情界面
  dicts: ['sbgl_sblx', 'sbgl_sbdw', 'sbgl_sbzt'],
  data() {
    return {
      wzxxId: null, //物资主键ID
      loading: false,
      wzData: [], //设备基本信息
      dialogVisible: false,
      content_style: {
        // 解决不对齐的问题
        'width': "400px",
        // 排列第二行
        'word-break': 'break-all',
        // 'background-color': '#f3f7ff'
      },
      label_style: {
        // 解决不对齐的问题
        'width': "250px",
        // 排列第二行
        'word-break': 'break-all',
        'background-color': '#F0F8FF'
      },
    };
  },
  created() {
  },
  methods: {
    handleOpen(row) {
      this.loading = true;
      this.wzxxId = row.wzxxId
      this.dialogVisible = true
      this.getWzData()
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    //获取详情数据
    getWzData() {
      const wzxxId = this.wzxxId
      getWzxx(wzxxId).then(res => {
        this.wzData = res.data
      })
    },

  }
};
</script>

<style scoped>
.right-align-label {
  text-align: right;
}

/* 定义表头中特定类名的文本居中 */
.el-table .custom-header .cell {
  text-align: center !important;
}
/* header 头部背景 */
/deep/ .el-card__header {
  padding: 3px 7px 3px;
  min-height: 10px;
  background-color: aliceblue;
}
</style>
